<template>
  <div class="comment-add" v-if="showComment">
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model.trim="comment.content"
      style="width: 100%; margin-bottom: 5px" show-word-limit>
    </el-input>
    <el-row :gutter="24">
      <el-col :span="8" :offset="16">
        <el-button type="primary" size="small" plain round @click="handleAddComment" style="width: 100%;">
          添加评论
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { message } from "ant-design-vue"
// import { addComment } from '@/api/comment';
export default {
  name: "CommentAdd",
  data() {
    return {
      showComment: true,
      comment: {
        parentId: 0,
        content: "",
        articleId: 0
      },
    };
  },
  inject: ["addComment","articleId"],
  props: {
    closedComment: {
      type: Boolean,
      default: false,
    },
    parentId: {
      type: Number,
      default: 0,
    }
  },
  mounted(){
    console.log("commentadd",this.articleId())
    this.comment.articleId=this.articleId()
  },
  watch: {
    parentId: function (newVal) {
      console.log(newVal);
    },
  },
  methods: {
    handleAddComment() {
      this.comment.articleId=this.articleId()
      console.log("parentId", this.parentId);
      if (this.comment.content.length <= 0) {
        message.error("请输入内容");
        return;
      }
      this.comment.parentId = this.parentId;

      let comment = JSON.parse(JSON.stringify(this.comment));

      this.comment.content = "";

      this.addComment(comment)
      this.$emit("handleCommentAddClose")
    },

  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.comment-add {
  margin: 8px 0 0;
}
</style>